<script lang="ts">
  import Title from "../../../components/Title/Title.svelte";
  import Ring from "../../../components/Ring/Ring.svelte";
  import { onMount } from "svelte";
  import { warning } from "../stores";
  onMount(async () => {
    warning.get();
  });
</script>

<div class="h-full flex flex-col w-full">
  <Title title="设备告警信息" />
  <div class="flex-1 flex gap-2 mt-1 w-full justify-around overflow-hidden">
    {#each $warning as w}
      <div class="basis-1/5 flex relative">
        <div class="bg" />
        <Ring percent={w.value} label={w.name} />
      </div>
    {/each}
  </div>
</div>

<style>
  .bg {
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(251, 253, 255, 0.5) 1%,
      #44a6fc 51%,
      rgba(62, 163, 252, 1) 52.5%,
      rgba(255, 255, 255, 0.5) 100%
    );
    opacity: 0.26;
    @apply rounded absolute h-full w-full top-0 bottom-0;
  }
</style>
